<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="//cdn.bootcss.com/vue/0.12.8/vue.js"></script>
    <script src="//cdn.bootcss.com/marked/0.3.2/marked.js"></script>
    <link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
    <!--使用highlight的github主题-->
    <link href="//cdn.bootcss.com/highlight.js/8.7/styles/github.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/highlight.js/8.7/highlight.min.js"></script>
    <script src="dist/vue-markdown.js"></script>
</head>
<body style="padding: 15px;">
<div style="width: 800px;max-width:100%;margin: auto">
    <!--这里覆盖了默认的text，并与父组件双向同步-->
    <md-editor text="{{@text}}" placeholder="Vue Markdown Editor"></md-editor>
</div>
<script>
    // 可以根据你的需要，对marked进行设置，详细见marked的官方文档
    // 下面是一个自定义解析table的例子
    var renderer = new marked.Renderer();
    renderer.table = function (header, body) {
        return '<table class="table table-bordered table-striped">\n'
                + '<thead>\n'
                + header
                + '</thead>\n'
                + '<tbody>\n'
                + body
                + '</tbody>\n'
                + '</table>\n';
    }
    marked.setOptions({
        renderer: renderer,
        gfm: true,
        tables: true,
        breaks: false,
        pedantic: false,
        sanitize: true,
        smartLists: true,
        smartypants: false,
        //这里使用了highlight对代码进行高亮显示
        highlight: function (code) {
            return hljs.highlightAuto(code).value;
        }
    });
    //初始化编辑器，设置默认参数，可以使用组件时对默认值进行覆盖
    var editor = new VueMarkdown(marked, {
        width: "100%",//宽
        height: "300px",//高
        text: null,//默认文本，
//        upload:{
//            server:"服务器上传地址",
//            max:500*1024,//文件大小限制，单位字节
//            formData:{//附加的表单属性
//                accessToken:"xxxx"
//            }
//        }
    });
    //对编辑器进行扩展
    //    editor.addButton({
    //        title: "标题",
    //        icon: "图标样式",
    //        type: "自定义类型，不能与已有的重合",
    //        callback: function (vm) {
    //            //这里是写回调逻辑，即点击按钮后进行的操作
    //            //vm是编辑器组件的实例，有三个方法可供使用：
    //            //replaceSelection(content),getSelection(),setSelection(start,end)
    //            //详细使用可看源码
    //        }
    //    });
    //注册到Vue
    Vue.use(editor);
    new Vue({
        el: document.body,
        data: {
            text: ""
        }
    })
</script>
</body>
</html>